<template>
  <div>
<!-- 城市列表 -->
  <van-nav-bar title="城市列表" left-arrow @click-left="onClickLeft" />
  <!-- 城市 -->
  <van-index-bar :index-list="indexList">
  <van-index-anchor index="1">当前城市</van-index-anchor>
  <van-cell :title="$store.state.user.dizhi">
  </van-cell>
  <!-- !uname ? '上海' : uname -->
  <van-index-anchor index="2">热门城市</van-index-anchor>
  <van-cell :title="item.label"  v-for="(item,index) in list" :key="index" @click="jump(item)">
  </van-cell>

</van-index-bar>
<!-- 遍历拿到首字母  放到表头 -->
<van-index-bar v-for="(itemall,index) in letters" :key="index">
  <!-- 用show隐藏和首字母不相同的城市 -->
  <van-index-anchor :index="itemall"  />
  <van-cell
  :title="item.label"
   v-for="item in list1"
   :key="item.id"
    v-show="item.short[0].toUpperCase() === itemall"
    @click='$event =>$router.push(`/layout/collect/?id=${item.value}`)'
    />
</van-index-bar>
  </div>
</template>

<script>
import request from '@/utils/request'
export default {
  name: 'ZufangCitList',
  // 初始化
  created () {
    this.hot()
    this.quan()
  },
  data () {
    return {
      indexList: ['#', '热门'],
      list: [],
      list1: [],
      letters: [],
      isAll: ''

    }
  },

  mounted () {

  },

  methods: {
    // 把城市名称传到vuex里面
    // 跳转首页
    jump (item) {
      this.$router.push('/home')
      console.log(item.value)
      this.$store.commit('user/getdizhi', item)
    },

    // 跳转首页
    onClickLeft () {
      this.$router.push('/home')
    },
    // 热门城市接口
    async hot () {
      const red = await request({
        url: '/area/hot'
      })
      // console.log(red)
      this.list = red.body
      // console.log(this.list)
    },

    // 全部城市的接口
    async quan () {
      const red = await request({
        url: '/area/city?level=1'
      })

      this.isAll = this.$route.query.home
      // console.log(this.isAll)
      // console.log(red.body) // short
      // 分类A-Z
      red.body.forEach(ele => {
        // 获取的数据首字母大写
        this.letters.push(ele.short[0].toUpperCase())
      })
      // 去重
      this.letters = new Set(this.letters.sort())
      // 复制代码遍历
      this.list1 = red.body
    }
  }
}
</script>

<style lang="less" scoped>

</style>
